<template>
  <div class="up-down-sort-component">
    <div class="wrapper">
      <div class="up-triangle" :style="{
        borderBottom:`${size} solid ${sort===0?activeColor:defaultColor}`,
        borderRight:`${size} solid transparent`,
        borderLeft:`${size} solid transparent`
      }"></div>
      <div class="triangle-divider"></div>
      <div class="down-triangle" :style="{
        borderTop:`${size} solid ${sort===1?activeColor:defaultColor}`,
        borderRight:`${size} solid transparent`,
        borderLeft:`${size} solid transparent`
      }"></div>
    </div>
  </div>
</template>

<script>
export default {
  name:'upDownSortComponent',
  props:{
    sort:{
      type:Number,
      default:2
    },
    size:{
      type:String,
      default:'4px'
    }
  },
  data(){
    return {
      defaultColor:'#a9a9a9',
      activeColor:'#333333'
    }
  }
}
</script>

<style lang="less" scoped>
.up-down-sort-component{
  display: inline;
  &>.wrapper{
    display: flex;
    flex-direction: column;
    .up-triangle,.down-triangle{
      width: 0;
      height: 0;
      flex-shrink: 0;
    }
    .triangle-divider{
      height: 2px;
      flex-shrink: 0;
    }
  }
}
</style>